<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="90%"
      :before-close="dialogClick"
      @open="initData"
      :destroy-on-close="true"
     
      
    >
      <!-- <div @click="print">导出</div> -->

      <div
        class="dialogBox"
        v-loading="loadings"
        element-loading-text="拼命导出中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
      >
        <v-OutPdf
          @exportPdf="initPdfData"
          @exportWord="exportWordTpl"
        ></v-OutPdf>
        <section ref="box">
          <div class="menu">
            <header>
              <p style="font-size: 30px">目&nbsp;&nbsp;&nbsp;录</p>
            </header>
            <main style="width: 100%">
              <div
                style="width: 100%"
                v-for="item in dialogData"
                :key="item.index"
              >
                <a :href="'/#' + item.index">
                  <p
                    style="
                      margin-bottom: 10px;
                      font-weight: 600;
                      font-size: 18px;
                    "
                  >
                    {{ item.title }}
                  </p>
                </a>
              </div>
            </main>
          </div>
          <div class="items" ref="content">
            <v-Card>
              <div slot="header" style="font-weight: 600" id="server-info">
                服务器基本信息
              </div>
              <div slot="main">
                <table
                  border="1"
                  style="border-collapse: collapse; width: 100%"
                >
                  <tr>
                    <th style="width: 20%; background: #cfcfcf">系统名称</th>
                    <th style="width: 20%; background: #cfcfcf">Os type</th>
                    <th style="width: 20%; background: #cfcfcf">Os version</th>
                    <th style="width: 20%; background: #cfcfcf">Host IP</th>
                    <th style="width: 20%; background: #cfcfcf">
                      是否启用该监控条目
                    </th>
                  </tr>
                  <tr v-for="(item, index) in serverInfo" :key="index">
                    <th style="width: 20%">{{ item["系统名称"] }}</th>
                    <th style="width: 20%">{{ item["Os type"] }}</th>
                    <th style="width: 20%">{{ item["Os version"] }}</th>
                    <th style="width: 20%">{{ item["Host IP"] }}</th>
                    <th style="width: 20%">
                      {{
                        item["是否启用该监控条目N或空不启用Y启用"] == "y"
                          ? "启用"
                          : "不启用"
                      }}
                    </th>
                  </tr>
                </table>
              </div>
            </v-Card>
            <v-Card>
              <div slot="header" style="font-weight: 600" id="server-cpu">
                CPU使用情况
              </div>
              <div slot="main">
                cpu平均使用率:{{ this.cpuInfo["cpu平均使用率"] || "无" }}
              </div>
            </v-Card>
            <v-Card>
              <div slot="header" style="font-weight: 600" id="server-io">
                内存使用情况
              </div>
              <div slot="main">
                内存平均使用率:{{ this.osInfo["内存平均使用率"] || "无" }}
              </div>
            </v-Card>
            <v-Card>
              <div slot="header" style="font-weight: 600" id="server-file">
                文件系统使用情况
              </div>
              <div slot="main">
                文件平均使用率:{{ this.fileInfo["文件平均使用率"] || "无" }}
              </div>
            </v-Card>
            <v-Card>
              <div slot="header" style="font-weight: 600" id="server-jiao">
                交换区使用
              </div>
              <div slot="main">无</div>
            </v-Card>
            <v-Card>
              <div slot="header" style="font-weight: 600" id="server-cipan">
                磁盘IO使用情况
              </div>
              <div slot="main">无</div>
            </v-Card>
            <!-- <el-card id="1" class="box-card">
						<div slot="header" class="clearfix">
							<span>服务器基本信息</span>
						</div>
						<div>
							<el-table
								:data="serverInfo"
								border
								style="width: 100%"
							>
								<el-table-column
									prop="系统名称"
									label="系统名称"
									width="180"
								>
								</el-table-column>
								<el-table-column
									prop="Os type"
									label="Os type"
									width="180"
								>
								</el-table-column>
								<el-table-column prop="Host IP" label="hostIP">
								</el-table-column>
								<el-table-column
									prop="Os version"
									label="Os version"
								>
								</el-table-column>
								<el-table-column
									prop="是否启用该监控条目N或空不启用Y启用"
									label="是否启用该监控条目"
								>
									<template v-slot="scope">
										<el-tag type="info">{{
											scope.row == 'y' ? '启用' : '不启用'
										}}</el-tag>
									</template>
								</el-table-column>
							</el-table>
						</div>
					</el-card>
					<el-card id="2" class="box-card">
						<div slot="header" class="clearfix">
							<span>CPU使用情况</span>
						</div>
						<div>
							cpu平均使用率:{{ this.cpuInfo['cpu平均使用率'] }}
						</div>
					</el-card>
					<el-card id="3" class="box-card">
						<div slot="header" class="clearfix">
							<span>内存使用情况</span>
						</div>
						<div>
							内存平均使用率:{{ this.osInfo['内存平均使用率'] }}
						</div>
					</el-card>
					<el-card id="4" class="box-card">
						<div slot="header" class="clearfix">
							<span>文件系统使用情况</span>
						</div>
						<div>
							文件平均使用率:{{ this.fileInfo['文件平均使用率'] }}
						</div>
					</el-card>
					<el-card id="5" class="box-card">
						<div slot="header" class="clearfix">
							<span>交换区使用</span>
						</div>
						<div></div>
					</el-card>
					<el-card id="6" class="box-card">
						<div slot="header" class="clearfix">
							<span>磁盘IO使用情况</span>
						</div>
						<div></div>
					</el-card> -->
          </div>
        </section>

        <!-- html to pdf -->
        <!-- <v-OutPdf
					@htmlData="initPdfData"
					:htmlData="dialogData"
				></v-OutPdf> -->
      </div>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button @click="dialogClick">取 消</el-button> -->
        <el-button type="primary" @click="dialogClick">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import bus from "common/bus.js";
import vOutPdf from "@/components/common/outPdf/outPdf";
import { htmlToBlob } from "@/api/index";
import downloadFile from "@/plugs/downloadFile";
import FileSaver from "file-saver";
import htmlDocx from "html-docx-js/dist/html-docx";
import vCard from "@/components/common/outPdf/card";
// import {htmlToBlob} from '@/api/index'
import { indexedDb } from "@/utils/IndexedDB.js";
import {
  selectosinfo,
  selectoscpu,
  selectosmemory,
  selectosfile,
} from "@/api/index";

export default {
  props: {
    dialogVisible: Boolean,
    itemType: String,
    dialogData: Array,
    title: String,
    info: null,
  },
  components: {
    vOutPdf,
    vCard,
  },
  created() {
    
    // console.log(dialogData);
    // this.initData()
  },
  data() {
    return {
      // dialogDatabaseItem: dialogDatabaseItem,
      // dialogServerItem: dialogServerItem,
      // dialogInternetItem: dialogInternetItem,
      pdfData: "",
      loadings: false,
      serverInfo: [],
      cpuInfo: "",
      osInfo: "",
      fileInfo: "",
      routes: this.$route.path,
      // info:this.info
    };
  },
  methods: {
    dialogClick() {
      (this.serverInfo = []), (this.cpuInfo = "");
      this.osInfo = "";
      this.fileInfo = "";
      this.$emit("haldDialogfalse");
    },

    initData() {
      selectosinfo(this.info)
        .then((res) => {
          console.log(res, "服务器");
          this.serverInfo.push(res);
        })
        .catch((err) => {
          console.log(err);
        }),
        selectoscpu(this.info)
          .then((res) => {
            console.log(res, "cpu");
            this.cpuInfo = res;
          })
          .catch((err) => {
            console.log(err);
          }),
        selectosmemory(this.info)
          .then((res) => {
            console.log(res, "内存");
            this.osInfo = res;
          })
          .catch((err) => {
            console.log(err);
          }),
        selectosfile(this.info)
          .then((res) => {
            console.log(res, "文件系统");
            this.fileInfo = res;
          })
          .catch((err) => {
            console.log(err);
          });
    },
    // print(){
    // 	this.$PDFSave(this.$refs["content"], "我的文件");
    // },
    // exportPdf(){
    // 	this.pdfData=''
    // },
    initPdfData() {
      // this.loadings = true;
      // console.log('html');
      // let data = `<!DOCTYPE html><html><head><meta charset="UTF-8"><style>a {text-decoration: none;color:#363636;}</style></head><body>${this.$refs.box.innerHTML}</body></html>`;
      // // console.log(data)
      // htmlToBlob({ html: data })
      // 	.then((res) => {
      // 		// console.log(res);
      // 		if (res.status === '200') {
      // 			this.$message({
      // 				showClose: true,
      // 				message: '导出成功',
      // 				type: 'success',
      // 			});
      // 		}

      // 		const buf = Buffer.from(
      // 			res.data._streams[1].data,
      // 			'binary'
      // 		);
      // 		// 再输入到 Blob 生成文件
      // 		const blob = new Blob([buf], { type: 'application/pdf' });
      // 		const a = document.createElement('a');
      // 		console.log(this.title)
      // 		// 指定生成的文件名
      // 		a.download = `${this.info.ip}的${this.title}` + '.pdf';
      // 		a.href = URL.createObjectURL(blob);
      // 		document.body.appendChild(a);
      // 		a.click();
      // 		document.body.removeChild(a);

      // 		this.loadings = false;
      // 	})
      // 	.catch((err) => {
      // 		console.log(err);
      // 		this.$message({
      // 			showClose: true,
      // 			message: '导出失败',
      // 			type: 'error',
      // 		});
      // 		this.loadings = false;
      // 	});

      let data = { id: 0, html: this.$refs.box.outerHTML };

      indexedDb("HtmlBase", [data], "infoBase", "id");
     

      let url = this.$router.resolve({
        path: "/pdfDownload",
        
      });
      window.open(url.href);
    },
    exportWordTpl() {
      let converted = htmlDocx.asBlob(
        `<!DOCTYPE html><html><head><meta charset="UTF-8"><style>a {text-decoration: none;color:#363636;}</style></head><body>${this.$refs.box.innerHTML}</body></html>`
      );
      FileSaver.saveAs(converted, `${this.info.ip}服务器运行报告.docx`);
    },
  },
 
};
</script>
<style>
.dialogBox {
  display: grid;
  grid-template-rows: auto;
  column-gap: 20px;
}
a {
  text-decoration: none;
  color: #909399;
}
.box-card {
  margin: 10px;
}
</style>
